<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 定义挂载点 -->
    <div id="app">
        <!-- 使用过滤器：数据|过滤器名字 -->
        <p>商品价格：{{price|filterPrice}}</p>
        <p>商品数量：{{count}}</p>
        <p>商品总价：{{price * count|filterPrice}}</p>
        <p>电话：{{tel|filterTel}}</p>
    </div>


    <div id="app2">
        <p>电话：{{num|filterTel}}</p>
    </div>
    <script>
        //定义全局过滤器  Vue.filter("过滤器名称",(需要过滤的参数)=>{return 返回处理结果})
        //全局过滤器，可以在所有的vue实例中使用，一次只能定义一个
        Vue.filter("filterTel",(t)=>{
            return t.slice(0,3) + "****" + t.slice(7);
        })

        new Vue({
            //挂载点
            el:"#app",
            //数据
            data:{
                price:99.9,
                count:8,
                tel:"13112345678"
            },
            //方法
            methods:{},
            //过滤器 -- 局部过滤器，只能在对应的vue实例中使用
            filters:{
                /* 过滤器名字(a){
                    a: 需要处理的数据
                    return 处理后的结果
                } */
                filterPrice(p){
                    console.log(p);
                    return p.toFixed(2); //处理后的结果
                },
                // filterTel(t){
                //     return t.slice(0,3) + "****" + t.slice(7);
                // }
            }
        })
        new Vue({
            el:"#app2",
            data:{
                num:"13189765432"
            }
        })
        //练习：定义一个全局过滤器，时间戳转换为具体的时间  年-月-日 时:分:秒
   </script>
</body>
</html>